<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- React核心包 最先引入  提供一个对象React -->
  <script src="../../react资料_stu/依赖包/react.development.js"></script>
  <!-- ReactDOM包  提供一个对象ReactDOM -->
  <script src="../../react资料_stu/依赖包/react-dom.development.js"></script>
  <!-- babel -->
  <script src="../../react资料_stu/依赖包/babel.min.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="app">

  </div>
</body>

<script type="text/babel">

  function Fn1() {
    return <h1>标题</h1>
  }

  function Fn2() {
    return <h2>内容</h2>
  }

  //最外层组件
  function App() {

    return (
      <div>
        <Fn1 />
        <hr />
        <Fn2 />
      </div>
    )

  }

  const root = ReactDOM.createRoot(document.getElementById('app'));
  root.render(<App />)

</script>


</html>